<template>
	<view>
		<nav-bar title="店铺详情" @goBack="goBack"></nav-bar>
		<scroll-view scroll-y :style="{ height: mainHeight }">
			<view class="top-bg"></view>
			<view class="top-data">
				<view class="top">
					<view class="left">
						<image class="left-img" :src="data.imgData[0]" alt="" />
					</view>
					<view class="right">
						<view class="shop-name">
							<view class="name-left">
								<view class="name">{{ data.storeName }}</view>

							</view>

						</view>
						<view class="shop-name">
							<view class="tag-number" v-if="data.storeCode">No.{{data.storeCode}}</view>
							<!-- <view class="tag-number">001</view> -->
							<view class="status">{{ data.status === 1 ? '营业中' : '暂停营业' }}</view>

						</view>
						<view class="shop-time">
							<view class="time-left">
								<u-icon name="clock" color="#666666" size="15"></u-icon>
								<view class="time">营业时间： {{ data.openingTime }}~{{ data.closingTime }}</view>
							</view>
							<view class="address-right" v-if="item.status" @click.stop="makePhoneCall(data)">
								<!-- <view class="detail">预约</view> -->
								<u-icon name="phone" color="#fff" size="15"></u-icon>
							</view>
						</view>
						<view class="shop-address">
							<view class="address-left">
								<view style="height: 30rpx;"><u-icon name="map" color="#666666" size="15"></u-icon>
								</view>
								<view class="address">
									{{ data.provinceString }}{{ data.cityString }}{{ data.countyString }}{{ data.detail
                }}</view>
							</view>
							<view class="guide" @click="goto(data)">
								<image class="guide-img" src="../../static/icon/home/guide.png" alt="" />
								导航
							</view>
						</view>
						<view class="shop-time">
							<!-- <view class="time-left">
					<u-icon name="phone" color="#666666" size="15"></u-icon>
					<view class="time" @click="makePhoneCall(data)" style="color: red;">联系电话： {{ data.phoneNumber }}</view>
				  </view> -->


						</view>

					</view>
				</view>
			</view>
			<view class="preview">
				<view class="title">
					<view class="box-line">
					</view>
					<view class="text">门店图片</view>
				</view>
				<view class="shop-img">
					<view class="img" v-for="(item,index) in data.imgData" :key="index">
						<image class="img-item" :src="item" alt="" />
					</view>
				</view>

			</view>
			<view class="preview">
				<view class="title">
					<view class="box-line">
					</view>
					<view class="text">门店介绍</view>
				</view>
				<view class="des">{{ data.intro }}</view>
			</view>
		</scroll-view>
		<view class="btn_edit" v-if='data.status == 1'>
			<view class="btn_cont" @click="toReserve">
				去预约
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from "../../components/nav-bar"
	import Search from '../../components/search/index'
	import api_home from '@/api/home'
	import config from '@/config'
	export default {
		name: "shopDetail",
		components: {
			NavBar,
			Search
		},
		data() {
			return {
				mainHeight: '',
				baseUrl: config.baseUrl,
				data: {},
				item: {
					status: 1
				},
				transferData: {}
			}
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight
		},
		onLoad(options) {
			const transferData = JSON.parse(decodeURIComponent(options.transferData))
			this.transferData = transferData
			this.getDetail(transferData.storeId)
		},
		methods: {
			goBack() {
				console.log(getCurrentPages());
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/index'
					})
					uni.removeStorageSync('chooseTechnician')
					uni.removeStorageSync('chargebackExplain')
					uni.removeStorageSync('transitionIds')
					uni.removeStorageSync('transferData')
				}
			},
			makePhoneCall(data) {
				uni.makePhoneCall({
					phoneNumber: data.landlinePhone, // 替换为您要拨打的电话号码
					success: function() {
						console.log('拨打电话成功')
					},
					fail: function(err) {
						console.error('拨打电话失败：' + JSON.stringify(err))
					}
				})
			},
			getDetail(id) {
				api_home.fetchShopDetail(id).then((res) => {
					const imgData = res.data.images.split(",")
					this.data = {
						...res.data,
						imgData
					}
				})
			},
			toReserve() {
				const params = encodeURIComponent(JSON.stringify(this.transferData))
				uni.navigateTo({
					url: `/subPages/home/chooseProject?transferData=${params}`,
				})
			},
			goto(data) {
				uni.openLocation({
					latitude: parseFloat(data.latitude),
					longitude: parseFloat(data.longitude),
					name: data.storeName,
					address: data.detail,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		width: 100%;
		height: 120rpx;
		opacity: 1;
		background: rgba(194, 126, 21, 1);
	}

	.top-data {
		opacity: 1;
		border-radius: 17rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 38rpx;
		margin-top: -100rpx;
		padding: 46rpx 44rpx 31rpx 42rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				width: 130rpx;
				height: 130rpx;
				position: relative;

				.left-img {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}

				.img-tag {
					position: absolute;
					bottom: -20rpx;
					left: 10.2rpx;
					width: 106rpx;
					height: 40rpx;
					font-size: 20rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					opacity: 1;
					border-radius: 31rpx;
				}
			}

			.right {
				width: 72%;

				.shop-name {
					display: flex;
					// justify-content: space-between;
					margin-bottom: 14rpx;
					align-items: center;

					.name-left {
						display: flex;

						.name {
							font-size: 32rpx;
							font-weight: 500;
							color: rgba(51, 51, 51, 1);
							height: 37rpx;
							line-height: 37rpx;
						}


					}

					.tag-number {
						// width: 80rpx;
						height: 37rpx;
						padding: 0 8rpx;
						opacity: 1;
						border-radius: 8rpx;
						line-height: 37rpx;
						border: 1rpx solid rgba(253, 90, 57, 1);
						text-align: center;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(253, 89, 57, 1);
						// margin-left: 20rpx;
					}

					.status {
						width: 99rpx;
						height: 37rpx;
						opacity: 1;
						border-radius: 8rpx;
						background: rgba(255, 237, 234, 1);
						line-height: 37rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(253, 89, 57, 1);
						text-align: center;
						margin-left: 12rpx;
					}

				}

				.shop-time {
					display: flex;
					justify-content: space-between;
					margin-bottom: 14rpx;
					align-items: center;

					.time-left {
						display: flex;

						.time {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
							margin-left: 10rpx;
						}
					}

				}

				.address-right {
					background-color: rgb(82, 199, 35);
					color: #fff;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 20rpx;
				}

				.shop-address {
					display: flex;
					justify-content: space-between;

					.address-left {
						display: flex;

						// align-items: center;
						.address {
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
							margin-left: 9rpx;
						}
					}
				}

				.guide {
					transform: translateY(-5rpx);
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 22rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 31.86rpx;
					color: rgba(194, 126, 21, 1);
					white-space: nowrap;

					.guide-img {
						width: 27rpx;
						height: 27rpx;
						margin-right: 12rpx;
					}
				}
			}
		}

	}

	.preview {
		opacity: 1;
		border-radius: 17rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 38rpx;
		margin-top: 24rpx;
		padding: 26rpx 41rpx 34rpx 39rpx;

		.title {
			position: relative;
			width: 100%;
			margin-left: -39rpx;
			margin-bottom: 20rpx;

			.box-line {
				position: absolute;
				left: 0;
				top: 0;
				width: 15rpx;
				height: 48rpx;
				opacity: 1;
				background: rgba(194, 126, 21, 1);

			}

			.text {
				margin-left: 44rpx;
				font-size: 38rpx;
				font-weight: 500;
			}
		}

		.des {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(51, 51, 51, 1);

		}

		.shop-img {
			display: flex;

			.img {
				width: 32%;
				height: 180rpx;
				border-radius: 11rpx 11rpx 11rpx 11rpx;
				opacity: 1;
				margin-right: 1%;

				.img-item {
					width: 100%;
					height: 100%;
					border-radius: 11rpx 11rpx 11rpx 11rpx;
				}
			}
		}

	}
</style>